<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>保养订单详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="renderer" content="webkit" />
    <link rel="icon" type="image/png" href="../assets/i/favicon.png" />
    <link rel="stylesheet" href="../assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="../assets/css/app2.css" />
    <link rel="stylesheet" href="../assets/css/icon2.css"/>
    <style type="text/css">
        p{margin: 0;}
        ul, li{padding: 0;margin: 0;list-style: none}
        .products-list ul li{color: #808080;font-size: 14px;padding: 0 15px}
        .numLi p span{width: 100%;display: block;height: 25px;color: #000000;font-weight: bold;}
        .numLi p span b, .red{color: #e81616 !important;}
        [class*=am-u-]{padding: 0;}
        p.txt b, .green{font-weight: normal;color: #029d3a;}
        p.txt{display: block; width: 100%; height: 40px; line-height: 25px; padding: 10px;}
        p.txt b{color: #808080}
        p.txt2{width: 100%;height: 35px;line-height:35px;padding:0 20px;font-size:1.4rem;background-color: #FFFFFF;border: 1px solid #e8e8e8; border-radius: 5px;}
        p.txt2 b{font-weight: normal;color: #09bb07}
        .tips{display: block;text-align: center;color: #bebebe;padding: 5px 0;}
        .help{width: 100%; display: block; text-align: center;margin: 30px 0}
        .btn-help{background-color: #ffffff;border: #dedfe0;padding: 10px 20px; color: #a6a6a6;border-radius: 5px;}
        .navList{display: flex;padding: 15px 0;}
        hr{margin: 0;}
        .rule{display:block;width: 70px;height:30px;line-height:30px;margin-top:10px;margin-right:10px;padding:0 5px;background-color: #FFFFFF;border: 1px solid #dedfe0;color: #a6a6a6;border-radius: 5px;}
        .nobody{display: none;}
        .am-u-sm-3 img{margin-bottom: 5px;}
        .center{text-align: center}
    </style>
</head>
<body style="background-color: #f3f3f7;">
<div class="am-g" id="am-g1" style="background-color: #fff;padding: 10px 0 10px 0px;border-bottom: 1px solid #d9d9d9">
    <!-- 初始 -->
    <img src="../assets/i/examples/state_1.png" class="i1 nobody" alt=""/>
    <!-- 确认订单 -->
    <img src="../assets/i/examples/state_2.png" class="i2 nobody" alt=""/>
    <!-- 上门接车 -->
    <img src="../assets/i/examples/state_3.png" class="i3 nobody" alt=""/>
    <!-- 到店洗车 -->
    <img src="../assets/i/examples/state_4.png" class="i4 nobody" alt=""/>
    <!-- 服务中 -->
    <img src="../assets/i/examples/state_5.png" class="i5 nobody" alt=""/>
    <!-- 接车到店 -->
    <img src="../assets/i/examples/state_6.png" class="i6 nobody" alt=""/>
    <!-- 洗车中 -->
    <img src="../assets/i/examples/state_7.png" class="i7 nobody" alt=""/>
    <!-- 送车途中 -->
    <img src="../assets/i/examples/state_8.png" class="i8 nobody" alt=""/>
    <!-- 服务完成 -->
    <img src="../assets/i/examples/state_9.png" class="i9 nobody" alt=""/>
</div>

<div>
    <p class="txt">
        <span class="am-fl am-text-sm">接车时间：<b>12:30~13:00</b></span>
        <span class="am-fr am-text-sm">交车时间：<b>18:00</b></span>
    </p>
</div>

<div style="position: absolute;width: 100%;padding: 10px 10px 0;">
    <p class="txt2 center">订单状态：<b>上门接车</b></p>
</div>

<div style="display: block">
    <img src="../assets/i/examples/map3.png" alt=""/>
</div>
<div class="tips am-text-sm">本服务由快快官方合作伙伴<b style="color: #e60012; font-size: 1.6rem;">中国平安</b>承保</div>
<div style="border-top:1px solid #d9d9d9;border-bottom: 1px solid #d9d9d9;padding: 0 15px;background-color: #fff">
    <div class="navList clearfix">
        <aside class="am-u-sm-3 am-list-thumb no-right-p">
            <img src="../assets/i/examples/123.png" style="border-radius: 8px;" alt="" />
        </aside>
        <section class="am-u-sm-9 am-list-main">
            <p class="am-text-sm" style="color: #000">姓名：陈光  工号: SZ0001</p>
            <p class="am-text-sm">驾龄：7年</p>
            <p class="am-text-sm">电话：15600153257</p>
        </section>
    </div>
    <hr />
    <div class="navList clearfix">
        <span class="am-fl ti am-text-sm">接车地点</span>
        <span class="am-fr am-text-sm" style="color: #bebebe;margin-left: 10px;">北京市朝阳区北苑王庄路天通苑4栋</span>
    </div>
    <hr />
    <div class="navList clearfix">
        <span class="am-fl ti am-text-sm">指定服务地点</span>
        <span class="am-fr am-text-sm" style="color: #bebebe;margin-left: 10px;">北苑王庄路快快洗车店</span>
    </div>
</div>

<div class="products-list" style="border-top:1px solid #d2d2d2;margin-top: 10px;">
    <ul>
        <li class="add">
            <span class="am-fl ti">交车时间</span>
            <span class="am-fr">2015-6-26&nbsp;&nbsp;&nbsp;&nbsp;18:15</span>
        </li>
        <li class="change">
            <span class="am-fl ti">初始里程</span>
            <span class="am-fr">32567km</span>
        </li>
        <li class="change">
            <span class="am-fl ti">项目费用</span>
            <span class="am-fr"><b style="color: #808080; font-weight: normal;">(行驶4.3km)</b>32571km</span>
        </li>
    </ul>
</div>

<div class="products-list" style="border-top:1px solid #d2d2d2;margin-top: 10px;">
    <ul>
        <li class="add">
            <span class="am-fl ti">路程共计</span>
            <span class="am-fr green">5公里</span>
            <span class="am-fr"><button class="rule">计费规则</button></span>
        </li>
        <li class="change">
            <span class="am-fl ti">服务费用</span>
            <span class="am-fr green">20元</span>
        </li>
        <li class="change">
            <span class="am-fl ti">项目费用</span>
            <span class="am-fr green"><b style="color: #808080; font-weight: normal;">(普通洗车)</b>48元</span>
        </li>
    </ul>
</div>

<div class="tips am-text-sm">当前在有效范围内，可以用优惠券<span class="green">10</span>元</div>

<div class="products-list" style="border-top:1px solid #d2d2d2;margin-bottom: 10px;">
    <ul>
        <li class="add">
            <span class="am-fl ti">合&nbsp;&nbsp;计：</span>
            <span class="am-fr green">48元</span>
        </li>
        <li class="change">
            <span class="am-fr red">未支付</span>
        </li>
    </ul>
</div>

<div class="help">
    <button class="btn-help am-text-sm">需要帮助？</button>
</div>

<script src="../assets/js/jquery.min.js" type="text/javascript"></script>
<script src="../assets/js/amazeui.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        function loadFunc(id) {
            var to = $("#am-g1");
            $(to).find(".i" + id).removeClass("nobody");
        }

        loadFunc(1);
    });
</script>
</body>
</html>